<template>
  <div class="search-box">
    <head-input v-model="inputValue" label="输入影城名称" display @click="back"></head-input>
    <cinema-distance :cinemasRe="cinemasRe" v-show="!inputValue" />
    <scroll class="scroll-content" :scrollbar="true" v-show="inputValue">
      <cinema-list :cinemaList="conformCinemaList" v-show="conformCinemaList.length" />
      <cinema-search-result v-show="!conformCinemaList.length" />
    </scroll>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import CinemaDistance from './children/CinemaDistance.vue'
import { cinemaReommend, cinemaList } from '@/network/cinema'
import CinemaList from './children/CinemaList.vue'
import Scroll from 'components/common/scroll/Scroll.vue'
import CinemaSearchResult from './children/CinemaSearchResult.vue'
import { mapMutations } from 'vuex'

export default {
  components: { CinemaDistance, CinemaList, Scroll, CinemaSearchResult },
  name: 'Search',
  data() {
    return {
      inputValue: '',
      cinemasRe: [],
      cinemaList: []
    }
  },
  created() {
    this.getcinemaReommend()
    this.getCinemaList()
    this.tabBarHide()
  },
  methods: {
    ...mapMutations(['tabBarShow', 'tabBarHide']),
    async getcinemaReommend() {
      const { data: res } = await cinemaReommend(this.cities.cityId)
      this.cinemasRe = res.cinemas
    },
    async getCinemaList() {
      const { data: res } = await cinemaList(1, this.cities.cityId)
      this.cinemaList = res.cinemas
    },
    back() {
      this.$router.back()
    }
  },
  computed: {
    ...mapState('cities', ['cities']),
    conformCinemaList() {
      return this.cinemaList.filter(item => {
        return item.name.includes(this.inputValue) || item.address.includes(this.inputValue)
      })
    }
  },
  beforeDestroy() {
    this.tabBarShow()
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  background: white;
  height: 100vh;
  width: 100vw;
}
.scroll-content {
  height: calc(100% - 0.49rem - 0.44rem);
}
</style>